<template>
  <span class="svg" :style="styleSVG" :alt="name" v-html="icon" />
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import icons from './icons';

@Component({})
export default class VSvg extends Vue {
    @Prop({ required: true }) readonly name!: string;
    @Prop({}) readonly styles!: object;

    get icon(): string {
      return icons[this.name];
    }

    get styleSVG() {
      return {
        ...this.styles
      };
    }
};
</script>

<style scoped lang="scss">
.svg {
  display: inline-block;
  vertical-align: middle;
}
</style>
